<template>
  <view class="page">
    <view class="top-box">
      <image :src="showImgApi + obj.img" mode="scaleToFill" class="back-img" />
      <view class="top-eye flex">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode="scaleToFill" />
        {{ obj.click }}
      </view>
      <view class="top-title">{{ obj.title }}</view>
      <view class="type-2 flex">
        <!-- <span>vip 免费</span> -->
        <view class="ff">￥{{ obj.people_price }} / {{ total }}方案</view>
      </view>
    </view>
    <view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
      <image :src="showImgApi + item.img" mode="scaleToFill" class="img" />
      <view class="item-bottom">
        <view class="title"> {{ item.title }}</view>
        <!-- <view class="flex-1"> <span>PK竞技</span><span>沉浸体验</span><span>助跑新人</span><span>领导力提升</span> </view> -->
        <!-- <view class="flex-2">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-39.svg" mode="scaleToFill" />徐奋斗
        </view> -->
      </view>
      <view class="item-1">
        <view class="type-2">
          <!-- <span>vip 免费</span>  -->
          ￥{{ item.people_price }}
        </view>
        <view class="item-eys">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode="scaleToFill" />{{ item.click
          }}
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-37.png" mode="scaleToFill"
            style="margin-left: 40rpx" />{{ item.up }}
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-38.png" mode="scaleToFill"
            style="margin-left: 40rpx" />{{ item.collect }}
        </view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="bottom-fix">
      <view class="type-2">
        <!-- <span>vip 免费</span>  -->
        ￥{{ obj.people_price }}
      </view>
      <view class="fix-item">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-47.jpg" />
        <button type="default" open-type="share"></button>
      </view>
      <view class="fix-item" @click="handleCollect">
        <image :src="imgApi + 'images/wallet/icon-10.svg'" v-if="obj.is_collect == 1" />
        <image :src="imgApi + 'images/wallet/icon-11.svg'" v-else />
      </view>
      <view class="fix-btn" @click="handleSub">购买专辑</view>
    </view>
    <u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open" closeable>
      <view class="pop-box">
        <view class="pop-box-title">订单确认</view>
        <view class="pop-flex flex">
          <image :src="showImgApi + obj.img" mode="scaleToFill" />
          <view class="pop-flex-right">
            {{ obj.title }}
            <view class="pop-flex-r-1">包含{{ total }}个方案</view>
          </view>
        </view>
        <view class="pop-tip">您购买的商品为虚拟内容服务，购买后不支持退订、装让、退还，请您知悉。</view>
        <view class="gm" @click="handleNav('/pagesB/my/programme')">购买后可在 <span>我的方案</span>中浏览</view>
        <view class="vip" @click="handleNav('/pagesB/vip/index')">
          <image src="https://www.atuanjian.com/appletStatic/static/images/u-30.png" mode=""></image>
          <view class="vip-title">开通蚂蚁团建VIP,立即享受费用折扣</view>
        </view>
        <view class="pop-bottom flex">
          <view class="pop-bottom-1 flex">总计:
            <!-- <span>vip 359.1旺币</span> -->
            <view class="wb">￥{{ obj.people_price }}</view>
          </view>
          <view class="pop-bottom-btn" @click="handlePay">立即支付</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {
  albumInfo, schemeLists, albumCollect, addAlbum, buyAlbum
} from "@/utils/request.js";
import { onReachBottom } from "uview-ui/libs/mixin/mixin";
export default {
  data() {
    return {
      show: false,
      obj: {},
      showImgApi: this.$config.showImgApi,
      imgApi: this.$config.imgApi,
      query: { page: 1, limit: 10, price_type: 2, scheme_album_id: '' },
      list: [],
      length: 0,
      total: 0
    };
  },
  onLoad(options) {
    let query = { id: options.id, user_id: JSON.parse(uni.getStorageSync("userInfo")).id }
    this.albumInfo(query).then(res => {
      if (res) {
        this.obj = res.row
        this.scheme_album_id = options.id
        this.init()
      }
    })
  },
  onReachBottom() {
    if (this.length < this.total) {
      this.query.page++
      this.init()
    }
  },
  methods: {
    async albumInfo(data) {
      return await albumInfo(data);
    },
    async schemeLists(data) {
      return await schemeLists(data);
    },
    async albumCollect(data) {
      return await albumCollect(data);
    },
    async addAlbum(data) {
      return await addAlbum(data);
    },
    async buyAlbum(data) {
      return await buyAlbum(data);
    },
    //方案列表
    init() {
      this.schemeLists(this.query).then(res => {
        if (res) {
          this.list = [...res.list, ...this.list]
          this.length = this.list.length
          this.total = res.total
        }
      })
    },
    close() {
      this.show = false;
    },
    detail(item) {
      uni.navigateTo({
        url: './detail?id=' + item.id
      })
    },
    open() { },
    handleNav(url) {
      uni.navigateTo({ url: url });
    },
    handleSub() {
      if (!uni.getStorageSync("userInfo")) {
        uni.showToast({
          title: "请先登陆",
          icon: "none",
          mask: true,
        });
        uni.navigateTo({ url: "/pagesB/login/login" });
        return;
      }
      if(this.obj.is_buy==1){
         uni.showToast({
          title: "已购买",
          icon: "none",
          mask: true,
        });
        return 
      }
      this.show = true;
    },
    handleCollect() {
      let data = { user_id: JSON.parse(uni.getStorageSync("userInfo")).id, id: this.obj.id, type: this.obj.is_collect == 1 ? 2 : 1 }
      this.albumCollect(data).then(res => {
        if (res) {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          if (data.type == 1) {
            this.obj.is_collect = 1
          } else {
            this.obj.is_collect = 2
          }
        }
      })
    },
    handlePay() {
      const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, scheme_album_id: this.obj.id }
      this.addAlbum(data).then(res => {
        console.log(res)
        if (res) {
          const obj = {
            id: res.order_no,
            // #ifdef MP-WEIXIN
            platform: 2,
            // #endif
            // #ifdef H5
            platform: 1
            // #endif
          }
          this.buyAlbum(obj).then(res => {
            // #ifdef MP-WEIXIN
            if (res.wechat_applet) {
              uni.requestPayment({
                timeStamp: res.wechat_applet.timeStamp,
                nonceStr: res.wechat_applet.nonceStr,
                package: res.wechat_applet.package,
                signType: res.wechat_applet.signType,
                paySign: res.wechat_applet.paySign,
                success: (res) => {
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    this.obj.is_buy = 1
                  }, 1500);
                },
                faile: (err) => {
                  console.log(err, "err");
                },
              });
            }
            // #endif
            // #ifdef H5
            if (res.jsapi) {
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: {
                  appid: res.jsapi.appId,
                  noncestr: res.jsapi.nonceStr,
                  package: res.jsapi.package,
                  // partnerid: "148*****52",
                  // prepayid: "wx202254********************fbe90000", // 统一下单订单号
                  timestamp: res.jsapi.timeStamp, // 时间戳（单位：秒）
                  sign: res.jsapi.signType, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    this.obj.is_buy = 1
                  }, 1500);
                },
                faile: (err) => {
                  console.log(err, "err");
                },
              });
            }
            // #endif
          })
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.vip {
  width: 98%;
  height: 69rpx;
  border-radius: 12rpx;
  margin: 30rpx auto 0;
  position: relative;
  background-image: linear-gradient(to right, #ffb850, #ff8e2c, #ff6206);
  font-size: 25rpx;
  display: flex;
  align-items: center;

  image {
    width: 177rpx;
    height: 129rpx;
    position: absolute;
    top: -36rpx;
    left: 60rpx;
  }

  .vip-title {
    margin-left: 276rpx;
    color: #ffffff;
  }
}

.pop-box {
  padding: 28rpx 0;

  .pop-box-title {
    text-align: center;
  }

  .pop-flex {
    width: 690rpx;
    margin: 65rpx auto 0;
    justify-content: space-between;

    image {
      width: 275rpx;
      height: 134rpx;
      border-radius: 10rpx;
      margin-right: 25rpx;
    }

    .pop-flex-right {
      flex: 1;
      font-size: 25rpx;
      text-align: left;

      .pop-flex-r-1 {
        font-size: 23rpx;
        margin-top: 18rpx;
      }
    }
  }

  .gm {
    font-size: 24rpx;
    color: #797979;
    margin-top: 40rpx;
    text-align: center;

    span {
      color: #ffbb50;
    }
  }

  .pop-bottom {
    width: 92%;
    margin: 58rpx auto 0;

    .pop-bottom-btn {
      width: 160rpx;
      height: 65rpx;
      line-height: 65rpx;
      text-align: center;
      font-size: 22rpx;
      color: #ffffff;
      border-radius: 64rpx;
      background: #ffb850;
    }

    .pop-bottom-1 {
      flex: 1;
      font-size: 25rpx;
      margin-right: 20rpx;

      span {
        margin-left: 4rpx;
        background-image: linear-gradient(to right, #f59a23, #f2f2f2);
        font-size: 20rpx;
        font-style: italic;
        margin-right: 20rpx;
        padding: 2rpx 10rpx;
      }

      .wb {
        font-size: 26rpx;
        color: #aaaaaa;
      }
    }
  }

  .pop-tip {
    width: 690rpx;
    font-size: 23rpx;
    margin: 58rpx auto 0;
    color: #7f7f7f;
  }

  .pop-copy {
    color: #ffbb50;
    margin-top: 16rpx;
  }
}

.kong {
  height: 200rpx;
}

.bottom-fix {
  width: 100%;
  height: 108rpx;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 -1rpx 5rpx rgba($color: #000000, $alpha: 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;

  .fix-item {
    position: relative;
    margin-left: 32rpx;
    font-size: 28rpx;
    color: #f59a23;

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 88rpx;
      height: 84rpx;
      opacity: 0;
    }

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
  }

  .type-2 {
    flex: 1;
    font-size: 22rpx;
    color: #7f7f7f;
    margin-left: 28rpx;

    span {
      color: #000000;
      background-image: linear-gradient(to right, #f59a23, #f2f2f2);
      font-size: 20rpx;
      font-style: italic;
      margin-right: 20rpx;
      padding: 2rpx 10rpx;
    }
  }

  .fix-btn {
    width: 168rpx;
    height: 67rpx;
    margin-right: 28rpx;
    border-radius: 62rpx;
    font-size: 22rpx;
    color: #ffffff;
    text-align: center;
    line-height: 70rpx;
    margin-left: 32rpx;
    background: #ffb850;
  }
}

.item {
  width: 694rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: 16rpx;
  margin: 20rpx auto 0;

  .img {
    width: 100%;
    height: 370rpx;
  }

  .item-1 {
    width: 92%;
    margin: 0 auto;
    padding-top: 16rpx;
    border-top: 1rpx solid#AAAAAA;
    display: flex;
    justify-content: space-between;

    .item-eys {
      display: flex;
      align-items: center;
      color: #aaaaaa;
      font-size: 20rpx;
      margin-right: 4rpx;

      image {
        width: 23rpx;
        height: 23rpx;
      }
    }

    .type-2 {
      font-size: 25rpx;
      font-weight: bold;

      span {
        background-image: linear-gradient(to right, #f59a23, #f2f2f2);
        font-size: 20rpx;
        font-style: italic;
        margin-right: 20rpx;
        padding: 2rpx 10rpx;
      }
    }
  }

  .item-bottom {
    width: 92%;
    margin: 0 auto;

    .title {
      font-size: 30rpx;
      padding-top: 16rpx;
    }

    .flex-1 {
      margin-top: 10rpx;

      span {
        font-size: 20rpx;
        border-radius: 4rpx;
        background: #facd91;
        color: #b8741a;
        padding: 2rpx 4rpx;
        margin-right: 12rpx;
      }
    }

    .flex-2 {
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      font-size: 20rpx;
      color: #7f7f7f;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.top-box {
  width: 100%;
  background: #ffffff;
  box-shadow: 3rpx 3rpx 5rpx rgba($color: #d7d7d7, $alpha: 1);
  padding-bottom: 29rpx;

  .top-title {
    margin-left: 29rpx;
    margin-top: 57rpx;
    font-size: 26rpx;
    font-weight: bold;
  }

  .type-2 {
    font-size: 20rpx;
    margin-left: 29rpx;
    margin-top: 29rpx;

    span {
      background-image: linear-gradient(to right, #f59a23, #f2f2f2);
      font-size: 20rpx;
      font-style: italic;
      margin-right: 20rpx;
      padding: 2rpx 10rpx;
    }

    .ff {
      font-size: 22rpx;
      color: #7f7f7f;
      margin-left: 12rpx;
    }
  }

  .back-img {
    width: 100%;
    height: 403rpx;
  }

  .top-eye {
    padding: 8rpx 25rpx;
    border-radius: 132rpx;
    background: rgba($color: #000000, $alpha: 0.5);
    font-size: 20rpx;
    color: #ffffff;
    margin-left: 54rpx;
    margin-top: -80rpx;
    width: 131rpx;

    image {
      width: 26rpx;
      height: 30rpx;
      margin-right: 7rpx;
    }
  }
}
</style>